/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
import { useStoreRoleCurrentProduct } from '@account/role/store/hooks'
/* model */
import { CustomerServiceCloudValue, ServiceCloudValue } from '@account/role/model'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, onBeforeMount, PropType, Ref, ref } from 'vue'
import { CustomerServiceCloudTextFunction, ServiceCloudTextFunction } from '@shb-lib/tenant'
/* 国际化灰度 */
import useFormMultiLanguage from '@hooks/useFormMultiLanguage'

const { internationalGray } = useFormMultiLanguage()

type RoleManagementViewHeaderRadioProps = {

}

enum RoleManagementViewHeaderRadioEventEnum {
  Input = 'input'
}

type RoleManagementViewHeaderRadioState = {
  _internationalGray: ComputedRef<boolean>;
  currentProduct: ComputedRef<string>;
  onCurrentProductRadioChangeHandler: (value: string) => void;
}

const RoleManagementViewHeaderRadio = defineComponent({
  name: ComponentNameEnum.RoleManagementViewHeaderRadio,
  setup(props: RoleManagementViewHeaderRadioProps, { slots, emit }) {
    
    const { currentProduct, setCurrentProduct } = useStoreRoleCurrentProduct()
    
    const _internationalGray: ComputedRef<boolean> = computed(() => internationalGray as unknown as boolean)
    
    const onCurrentProductRadioChangeHandler = (value: string) => {
      setCurrentProduct(value)
      emit(RoleManagementViewHeaderRadioEventEnum.Input, value)
    }
    
    return {
      currentProduct,
      _internationalGray,
      onCurrentProductRadioChangeHandler
    }
    
  },
  computed: {
    classNames() {
      return {
        [ComponentNameEnum.RoleManagementViewHeaderRadio]: true,
        // @ts-ignore
        "role-management-view-header-radio-international": this._internationalGray,
      }
    },
    /** 
     * @description 客服云
    */
    customerServiceCloudText() {
      return CustomerServiceCloudTextFunction()
    },
    /** 
     * @description 客服云 - 值
    */
    customerServiceCloudValue() {
      return CustomerServiceCloudValue
    },
    /**
     * @description 服务云 
    */
    serviceCloudText() {
      return ServiceCloudTextFunction()
    },
    /**
     * @description 服务云 - 值
    */
    serviceCloudValue() {
      return ServiceCloudValue
    }
  },
  render(h) {
    return (
      <div class={this.classNames}>
        
        <el-radio-group 
          value={this.currentProduct}
          onInput={this.onCurrentProductRadioChangeHandler}
        >
          
          {/* start 服务云 */}
          <el-radio-button label={this.serviceCloudValue}>
            { this.serviceCloudText }
          </el-radio-button>
          {/* ned 服务云 */}
          
          {/* start 客服云 */}
          <el-radio-button label={this.customerServiceCloudValue}>
            { this.customerServiceCloudText }
          </el-radio-button>
          {/* end 服务云 */}
          
        </el-radio-group>
        
      </div>
    ) as any
  }
}) as any

export {
  RoleManagementViewHeaderRadio
}
